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BLoC (Bussiness Logic Component) 


5 
00:15 © 25:58 


Menjelaskan model state mangement yg lain bloc 
Untuk menjelaskan bloc ini akan memberikan contoh sederhana 
Disini dpt dilihat aplikasi yg kita liohta disini ada animated container dan 2 tombol 
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BLoC (Bussiness Logic Component) 


O Type here to se 
00:48 ammm 25:58 


Ketika klik yg warna biru maka berubah menjadi biru dan juga klik warna ember 
maka berubah lagi 
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BLoC (Bussiness Logic Component) 


00:56 Sum 
b | om») CI SsiSix 


2 tombol ini ditekan maka warna tampilkan container 
Sebelum masuk codingan nya saya akan menjelaskan konsep dasar dari bloc ini 
Kosep dasar sederhanan 
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BLoC (Bussiness Logic Component) 
po Application UI 
Example: Mapping 
onPressed Event to 
new State 

01:25 CO 25:58 
N ela Ci HS Ni || 


Pertama akan muncul sebuah event yg akan triger perubahan dari state 
Contoh yg tadi 

Kita klik button lalu event ini dimasukan kedalam bloc 

Bloc ini akan dilakukan proses yaitu mapping event to new state 

Jadi event tadi akan diproses dari bloc dan akn menjadi satte baru 


Setealh itu state baru akan berubah aplikasi ui kita 
Gambaran seperti ini 
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@ G The button triggers an event 


01:54 — 
BE Ka Kin SS 


Ketika klik button akan menjadi triger event 
Lalu didalam bloc ini event ini akan berubah menjadi state baru 
Contoh ketika buton warna biru maka akan berubah menjadi biru 
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The container change its color | 


Ki based on the new state 


8 G The button triggers an event 


02:16 
DI Ke IR SS 


Sebelum menjalskan lebih lanjut 
Akan menjalaskan tream controler 
Stream controler akan dipakae kedalam bloc kita 


25:58 


25:58 


Streamcontroler itu adalah componen yg menkontroler stream atau aliran data 
Jadi disni akan utama kan 
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sink 


stream 


x 
ò 


Output 


02:41 
MH Ka EN SS 


Akan diutama sink yaitu kran 

Streeam yaitu aliran contoh slang 

Keluar yaitu berupa air 

Stream sebagi input 

Jadi ada input masuk sini maka akan keluar dari stream 

Stream contoroler untuk berfungsi kalau kita punya componen kita butuh sebuah 
data 

Tapi data itu tidak peduli maka kita butuh streamcontroler 

Jadi disni streamcontoler komponen nya nerima dat2 saja 

Tidak peduli dari mana 

Sedangkan dari input tau nya Cuma kasih data doang 

Tidak peduli data itu kemana tergantung stream mau arahkan kemana 
Untuk lebihg jelas lagi kita bikin model bloc yg akan dibuat 

Berikut ini model bloc dibuat didalam aplikasi 

Kasih nama color bloc 

Karena dia akan menatur warna 

Dialam color bloc akan ada 2 buah stream controler 

Yg pertama mengatur colors event 

Kedua akan mengatur 

Color state 


A 47.[ENG SUB] FLUTTER 44. BLoC State Management (Stream Controller & Stream Builder).mp4 - VLC media player = x 


Media Playback Audio Video Terjemahan Peralatan Tampilan Bantuan 


Mm Trigger an event 
L 


| oo 4 | Based on the event, change the color state 


mapEventToState Method: 


m ep a Fs O || 
Jadi si button ini akan trigger event dia akan memberikan input yg akan terjadi 
sesuatu 

Stelah masuk akan mengalirka 

Berikutnya akan dikirimkan ke satu buah method mapEvent 

Method ini berfungsi berdasarkan event yg masuk tadi dia akan lihat event mana 
Dilihat event biru karena itu dai mengubah colors state menjadi biru sebelumnya 
ember 

Si method ini akan melanjutkan state ke update tadi kedalam stream controler 
Yg colors state lalu dia mengirkan lagi ke dalam ui lagi 

Maka masuk ke sini maka menerima animatedContainer 
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Trigger an event 


Update the UI based 
on current color state 


06:10 
IN Ke CI SSM 


Ini yg akan dibuat 

Ada colors bloc 

Ada 2 stream controler 

Sekarang langsung buat kjodingan nya 
Pertama buat stf widget 
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main() => runApp(MyApp()): 


home: Scaffc 
appBar: AppBar(title: T 
», 
); 
1 


PI 


Give the updated color state 


25:58 


Lv] tonnectea deviCe 1s TULIy Instaliea. (4 avallabie) 


In order to run your application, type: 


Sda 
$ flutter run 


Baa 98 2GB | 
IL Ke Claw STX 


Membuat bloc tanpa libray 


INISCoS5 Space? UNO CF Ost Peo IAI A @ W1 
COTELE LLE PNG Dora 


Supaya mengerti konsep nya setalh itu video berikutnya menjalaskan bagaimana 


mengunakan libray dgn bloc ini 


Body buat center 
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edia Playback Audio Video Terjemahan Peralatan 


Bantuan 


Tampilan 


creates 


returr 
home: 
appBar: 
body: 
child: 

duration: ion(milliseconds: 500), 
width: 1 
height: 
color: Colors.amber, 


LV] tonnectea device 1S fully InStaiied. (1 avalia01e) 
In order to run your application, type: 


SAC NE 
$ flutter run 


08:17 


25:58 


Setelah itu diatas nya buat floating button kita buat 2 buah 


Maka paasang row agar kesamping children itu memberikan floating Avction button 
Lalu kasih jarak sizedbox lebar 10 


Terus buat lagi floating onprase kosong i dahulu 
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Tampilan 


et build(f 
returr 
home: f i( 
floatingActionButton: Rc 
children: «Widget»| 
FloatingActi 
backgroundColor: Co 
onPressed: () (by), 
izedBox(width: 10,), 
FloatingAct tton(onPressed: () (), 
backgroundColor : rs.lightBlue,) 
l» 


Lv] tonnectea device 1s tuLiy Instatiea. (4 avalianie) 


In order to run your application, type: 


Std 
$ flutter run 


09:24 25:58 


Shist alt s 
Lalu mainAxis di buat end 
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build( context) ( 
( 
home: ( 
floatingActionButton: ( 
mainAxisAlignment: 
children: « >[ 
( 
backgroundColor: 
onPressed: () fb, 


09:49 


IN da Gu Fs 0 || 
Sekarang buat bloc nya 

Buat file beri nama color bloc 

Lalu isnya pertama buat enum lalu namanya colorEvent 

enum ini membuat jenis jenis colors event 

ada dua macam color event to (to ember, to light blue) 

lalu buat class bloc nya namanya colorsBloc {} 

pertama2 dalam colors bloc kita perlu seautu menyimpan warna 
maka buat Color color = Colors.ambers 

ambil amterial dart 

colrs ini akan manstate kita 

warna apa yg ditampilkan ke animated container 

— artinya private tidak bisa di akses dari luar 

Tugas kita buat stream controler di buat ada 2 

Pertam ytaitu stream colors event 

Kita import dat:asyn 

Kedua buat stream colors untuk state nya 


A 47.[ENG SUB] FLUTTER 44, BLoC State Management (Stream Controller & Stream Builder).mp4 - VLC media player 
Media Playback Audio Video Terjemahan Peralatan Tampilan Bantuan 


H 
Jlorevent fto amber, to light blue) 
olorBlocf 


r color = Colors.amber, 


vento eventController = S 


lor? stateController = StreamCor 


on RNE L22 in debug mode... 


pk1debuglapp-debug. apk. 


12:13 


Ik ma DI 


ml Spam? UNG D Dat Famer 1AT MAR GG 


BEE ME.) 
Berati kita punya 2 
Kembali ke gambar 
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II 
è | 
| 
IU 
è 
Hi ma) ila Ssi F paa 
Kita buat dua ada colors event dan color state 
Maka kita buat dulu event controler 


Jadi untuk event kita akan buat geter sink nya dari colors event lalu get dia 
kembalikan 


Dan juga buat state colors 
Ini buat private karena di dalam 


Stream stateStream untuk selang nya 
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3 


(to amber, to light blue) 


> eventController = 
eventSink => _eventController.sink; 


> _stateController = 
_StateSink => _stateController.sink; 
stateStream => _stateController.stream; 


BULAT OULLAYapp puts ya > app-aeoug. apx. 
2019-0: 7 : o. FATAL: 
: 2019-08 È FATAL: 
2019 2 FATAL: "ead create RC18SingleThr 
FATAL: p E 3 i: ] N3BR ngleThread ucceed 
7 FATAL: p 4 jo 212 ] 1C18SingleThr erE succ 
3 FATAL: 3 ngleThreadWorkerE suc 


i “aw Na HG Mg” 
Dan sekarang buat method nya kita buat private karena dia didalm 

Lali dia meminta satu buah parameter ColorsEvent 

Maka disni kita buat perubahan state nya 

Buat if jika colors evnet teryata ember maka di ubah menjadi colors ember kalau gk 
maka dibuah lightblue 
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> _eventController = 
>(); 
eventSink => _eventController.sink; 


> _stateController = 
_stateSink => stateController.sink; 
stateStream => _stateController.stream; 


_mapEventToState( colorEvent) { 
if (colorEvent .to amber) 


“color = .amber, 


.lightBlue, 


BULAT DULI 
F/EffectsD 201 7 8:00. FATAL: pthread create 
: 2019-08 :18:00.184 FATAL: e 
201 7 .184 FATAL: re ate 3SingleThr: 
FATAL: pthread_ 2 2512] N3 SingleThreadWorkerE s 
7 FATAL: pthread_join [21803 2C18SingleThr 
FATAL: pthread join (14019 


i Gua a ABE . 
Skerang kita punya 3 tingal sambung2i 
Supaya sambung dari stateSink masuk ke sinkControler 
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Mn 


> eventController = 
< >(): 
_mapEventToState( colorEvent) 
package:bloc_plain/color_bloc.dart 
The declaration '_mapEventToState' isn't referenced. 
Try removing the declaration of 
" mapEventToState'. 


mapEventToState( colorEvent) ( 
(colorEvent == .to amber) 
“color = .amber: 


color .lightBlue, 


stateSink.add( color), 


FATAL: N3BRC18SingleThreadWorkerE 


: pthread j 


IN Ke Ka STX ME.) 
Jadi sekarang sudah menghubungakan dari stateSink ini dia akan mengeluarkan 
output stateSink 

nanti stateSink akan diamasukan kedalam container 

sekarang kita hubungi lagi dari eventtosatet 


didalam controktornya ColorBlock()4 3 

kita pasangkan stream.listen ini fungsi untuk memasangkan method yg akan 
nerima streamcontroler ini yaitu 'mapEEventTostate 

lalu dibawah nya jgn lupa buat satu buah fungsi disopose 

ini fungsi nya beresin selang2 tadi 

jadi nya ketika buat stream contoroler itu makan memori jika tidak dipakai lagi 
sudah beres 

itu sicolorsBloc disopose kalau tidak akan memakan meori sekain besar 

disni cukup tulis .close 
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loe beat © 
MAPEVENL Ud La Lek COLUPEVENL) 4 
(colorEvent == .to amber) 


“color = .amber, 


color = .lightBlue, 


.stateSink.add( color), 


) 


Oí 


eventController.stream.listen(_mapEventToState); 


se() { 
_eventController.clo 
.stateController.clo 


FATAL: p 
@8 FATAL: pthread join [14019555 


G 
F 

F 
F/ 
F 
F 


R 


18:31 


Sekarang sudah jadi 


Jadi didalam colors bloc kita punya variabel yg menyimpan state nya yaitu warna 
Lalu kita ada 2 stream controler yg satu satu contorler untuk event dan state nya 
Colntrolerevent buat public supaya bisa diakses dari tombolnya 

Agar tombol nya kasih event kedalam bloc ini 

Lalu si stateControler buat private karena dia masuk buat toState 


Lalu stream buat public biar bisa diakses container menerima state terbaru 
Lalu buat map 

Maka 

Oke kembali ke main dart 

Pertama buat dahulu colorBloc nya 
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onn onom 1 usang 


package:flut 
bloc.dart 


main() => runApp( (OH 


createState() => 


context) { 
Os 
urn 


hama- 


F/EffectSDK (25498): 9-08 11 .997 FATAL: pthread create [2180375792] N3BRC18SingleThreadWorkerE 
F/EffectSDK(25498): 20 8 11:32:28. FATAL: pthread create [1492991856] N3BRC18SingleThreadWorkerE 
F/EffectsDK (25498): 11: 086 FATAL: pthread join (2180662512) N3BRC18SingleThreadWorkerE 
ectSDK(25498): 2019-6 11: .006 FATAL: pthread join [2180375792] N3BRC18SingleThreadWorkerE succeed 
F/EffectSsDK (25498): 2019-68-17 11:32:29.007 FATAL: pthr 3 join [1 991856) N3BRC18SingleThreadWorkerE succeed 


omm V/InputMethodManager(2 : Reporting focus gain, without startInput 


No, 
Sekarang kita hubungkan floatingbutton kran yg ada di colorsBlock 


Disni di onprased maka dibbuta bloc.eventSink 
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Q 
orin roroesan floatingActionButton: 
mainAxisAlignment : 
children: < >[ 


backgroundColor: 
onPressed: () ( 
bloc.eventSink. add ( .to amber), 


onPressed: () ( 
bloc.eventSink. add( 

h 

backgroundColor: .lightBlue, 


ETTECEDUK([ 4 5): 2029-08-17 32:2B.99/ FAIAL: prnreaa create |41500042] N3bRLIBHINK1E|Nreaaworkert 
F/EffectSDK(25498): 2019-08-17 : .997 FATAL: pthread ate (218037 2] N3BRC18SingleThreadWorkerE 
F/EffectSDK(25498): 2019-08-17 : . FATAL: pthread create [1402991856] N3BRC18SingleThreadWorkerE 
F/EffectSDK(25498): 2019 :32:29.006 FATAL: pthread join [2180662512] N3BRC18SingleThreadWorkerE succeed 
F/EffectSDK(25498): 2019 : 9.006 FATAL: pthread join [2188375792] N3BRC18SingleThre. orkerE succeed 
F/EffectSDK (25498): : 29.067 FATAL: € join (1402991856) N3BRC18SingleThreadWorkerE 


V/InputMethodManager (20905) : ng focus gain, without startInput 


21:57 
MH KI DI 


Maka sudah hubgungkan floating button ke event Sink 


Sekarang tngal hubungkan animated dari bloc nya 
Maka ini kita cut dahulu 
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Yg 

appBar: 
title: 

», 

body: 
child: 


duration: 


width: 
height: 


color: 


F/ETTECTSUK| 
F/EffectsDK (25498): 
F/EffectsDK (25498) : 
F/EffectsDK (25498): 

EffectsDK (25498): 
F/EffectSDK (25498): 


495): 2019-05 
2019-08 
2019-68 
2019 
2019-08 
V/InputMethodManager (28 


22:26 


1 
Lalu kit abuat streamBuilder 


1 


Kelam oo cth 


pai 


16 


08- 


2019-08- 


oC tanpa Librar 


( 
(milliseconds: 588), 
1 


ee 


.amber, 


YY/ FAIAL: 
FATAL: 
FATAL: 
FATAL: 
FATAL: 


FATAL 


punreag create (4150004514) N3bKLIBSINng ei nreaaworrert 
17 
17 
17 11: 
17'211: 
17 11:32: 


11 
11 


.997 pthread create [2180375792] N3BRC18SingleThreadWorkerE 
ate (1402991856) N3BRC18SingleThreadWorkerE 
N3BRC18SingleThreadWorkerE 
N3BRC18SingleThreac ere 
N3BRC18SingleThreadWorkerE 


8.997 pthread cre 


086 pthread : 
ad join [2180375 
th 3 join [1402991856] 


Reporting focus gain, without startInput 


9.006 pthre ork succeed 


607 succeed 


Ini fungsi nya build widget ketika dapatt update dari stream 


Stream dari bloc.stateStream 
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Audio 


Fa 


Oren roro. 1 usaven 


child: 
stream: 


initialData: 
builder: 
return 
duration: 
width: 
height 
color: 


` 


inputmetnoamanager( 10505): 
/EffectSDK (27462): 
/EffectSDK (27462): 

F/EffectSDK (27462): 
/Effe K (27462): 
/EffectsDK ( 
/EffectSDK (27462): 


2019-08 
2019-08 
2019-08- 
2019 
2019 
2019-08 


08 


62): 


Ke DIN 


("BLoC tanpa Libra 


( 
bloc.stateStream, 
.amber, 
(context, snapshot) ( 

( 
(milliseconds: 560), 
100, 

100, 


snapshot.data, 


reporting 
1731: 
17 
17 


Tocus gain, 
FATAL: 
FATAL: 
FATAL: 
FATAL: 


FATAL: 


WILNOUT startinput 


138. thread create [218e 2512) N3BRC18Sir eThreadWorkerE 
ate (2180375792) N3BRC18SingleThreadWorkerE 
pthread create (1404175600) N3BRC18SingleThreadWorkerE 
(2180662512) N3BRC18SingleThreadWorkerE 
[2180375792] N3BRC18SingleThreadWorkerE succeed 


(1404175660) N3BRC18SingleThreadWorkerE succeed 


pthread cre 
pthread join succeed 
pth 


pthread 


i join 


17 11: 


join 
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Q Xi 


createState() 


dispose() ( 
bloc .dispose(); 
.dispose(); 


build( context) { 
returr 
home: 
F/EffectSDK(2 2019-08 :40:38.437 FATAL: pthread create [2180375792] N3BRC18SingleThreadWorkerE 
F/EffectSDK(27462): 2019-08-17 40:38.437 FATAL: pthread create (1404175600) N3BRC18SingleThreadWorkerE 
F/EffectSDK(27462): 2019-68-17 11:46 FATAL: pthread join (2180662512) N3BRC18SingleThreadWc E 
F/EffectSDK(27462): 2019-08-17 11:46 - FATAL: pthread join [2180375792] N3BRC18SingleThreadWorkerE 
F/EffectSDK(27462): 2019-88-17 11: .458 FATAL: pthread join (1404175609) N3BRC18SingleThreadWorkerE 


amsa Reloaded 463 librarie 


24:59 
HN rela oa IR SIS 


Sekrang kita restatrt aplika nya 
Sekarang coba maka berubah 
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Terjemahan Peralatan Tampilan Bantuan 


createState() 


dispose() ( 
bloc.dispose(): 
ispose(): 


build( context) ( 
urr 
home: 


F/ETTECTSUR| 4/404): 4019-05 -4 FAIAL: ptnreaa create | 1530004514) NsbrLasSsingie nreaaworkert 
F/EffectSDK (27462): 2019-08 11:40:38.437 FATAL: pthread create (2180375792) N3BRC18SingleThreadWorkerE 
F/EffectSDK (27462): 2019-08 11:40:38.437 FATAL: pthread create (1404175600) N3BRC18SingleThreadWorkerE 
F/EffectSDK ( 6 : 2019-08 11:40:38.448 FATAL: lorkerE s 
F/EffectSDK (2746 : 2019-88 11:40:38 3 FATAL: [ 7 N3BRC18SingleThreadWorkerE succeed 
F/EffectSDK(27462): 201 11:40:38. FATAL: 6 N3BRC18SingleThre kerE succeed 


Reloaded 2 of 463 librari 865ms 


II Ke DI 
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Fal 


orn sonors tuna 


createState() 


dispose() ( 
bloc .dispose; 
.dispose(); 


context) { 


/(anpucmetnoamanagen( 2996): reporting TOCUS gain, WITNOUT Startinput 
/EffectSDK(27462): 2019 3-17 11:40:38. FATAL: pthread create [2180662512] N3BRC18SingleThreadWorkerE 
/EffectSDK(27462): 2019-08-17 11:40:38. FATAL: pthread create [2180375792] N3BRC18SingleThreadWorkerE 

F/EffectSDK(27462): 28 8 11:40:38.437 FATAL: pthread create [1404175680] N3BRC18SingleThreadWorkerE 

F/EffectSDK(27462): 2019-08-17 11: . 3 FATAL: pthread join [2180662512] N3BRC18SingleThreadWorkerE succe 

F/EffectSDK(27462): 2019-08-17 11: : 3 FATAL: pthread join [2180375792] N3BRC18SingleThreadWorkerE succe 

F/EffectSDK(27462): 2019-08-17 11: 138. FATAL: eThreadWorkerE succeed 


24:49 


Ii he Tw Ss MP || 
selaramg di restart aplikasin ya 
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O 


createState() -» 
BLoC tanpa Library 


dispose() { 
bloc.dispose(): 
.dispose(): 


build ( context) ( 
return 
home: 


V/AudioManager (2090 playSoundEffect  effectType: 8 
I/zygote64(20905): Do partial code cac ollection, code-27KB, data-2 
gote64(20905): After code cache collection, code-27KB, da 7KB 
10te64(20905): Increasing code cache capacity to 128KB 
V/AudioManager (2096 playSoundEffect effectType: 8 
amsa V/AudioManager( ): playSoundeffect  effectType: 0 


25:29 
Ih Ke CI SIS 


